<!-- 时间选择 -->
<template>
  <div class="times">
    <el-date-picker
      v-model="timeArr"
      :clearable="false"
      type="datetimerange"
      :picker-options="pickerOptions"
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
      align="right"
    ></el-date-picker>
  </div>
</template>

<script>
import utils from '@/utils/common.js'
export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  data () {
    // 这里存放数据
    return {
      timeArr: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          },
          {
            text: '最近一个月',
            onClick: picker => {
              picker.$emit('pick', [
                utils.getDate(utils.getLast3Month(1).last),
                utils.getDate(utils.getLast3Month(1).now)
              ])
            }
          },
          {
            text: '最近三个月',
            onClick: picker => {
              picker.$emit('pick', [
                utils.getDate(utils.getLast3Month().last),
                utils.getDate(utils.getLast3Month().now)
              ])
            }
          },
          {
            text: '最近半年',
            onClick: picker => {
              picker.$emit('pick', [
                utils.getDate(utils.getLast3Month(6).last),
                utils.getDate(utils.getLast3Month(6).now)
              ])
            }
          }
        ]
      }
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {
    timeArr (val) {
      if (val) {
        this.$emit('change', {
          start_time: val[0] ? utils.timeChange(val[0]) : '',
          end_time: val[1] ? utils.timeChange(val[1]) : ''
        })
      } else {
        this.$emit('change', {
          start_time: '',
          end_time: ''
        })
      }
    }
  },
  // 方法集合
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {
    this.timeArr = [
      utils.getDate(utils.getLast3Month().last),
      utils.getDate(utils.getLast3Month().now)
    ]
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {},
  beforeCreate () {}, // 生命周期 - 创建之前
  beforeMount () {}, // 生命周期 - 挂载之前
  beforeUpdate () {}, // 生命周期 - 更新之前
  updated () {}, // 生命周期 - 更新之后
  beforeDestroy () {}, // 生命周期 - 销毁之前
  destroyed () {}, // 生命周期 - 销毁完成
  activated () {} // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>
<style lang="scss" scoped></style>
